<template>
	<view>
			<!-- 施工内容 -->
			<view v-if="prjSchemeList && prjSchemeList.length">
				<view class="repairHeader" v-for="(item,index) in prjSchemeList" :key="index">
					<view class="">
						<view class="repairHeader-left">
							<view class="repairHeaderOne">
								<view class="text1">
								</view>
								<view class="text">
									<text>{{index + 1}}</text>
								</view>
								<view class="" style="font-weight: 600;">
									<text class="text2">{{item.schemeName}}</text>
								</view>
							</view>
							<view class="repairOver" v-if="item.finisheBy!=null && item.finisheBy!=''">
								<text>完成</text>
							</view>
						</view>
						<view>
							<view class="repairProject">
								<view class="a">
									<view>
										<view class="top_left">
											方案
										</view>
										<view class="top_right">
											<text>{{item.maintDesc}}</text>
										</view>
									</view>
								</view>
								<!-- 执行记录 -->
								<view class="a">
									<view>
										<view class="top_left" style="font-weight: 600;">
											执行记录
										</view>
										<view class="top_right">
											<text>{{item.execSituation|| ''}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view>
							<view class="repairProject">
								<view class="a">
									<view class="fitting" @click="goToDatail(item.schemeImgs,item.schemeName)">
										<block v-for="(b,d) in item.schemeImgs" :key="d">
											<fileImage v-if="d<3" :src="b.filePath_T" :className="['cidentChen']" />
										</block>


										<view class="filePathImage" :style="{backgroundImage: 'url(' +item.schemeImgs[0].filePath_T + ')',
																		  'background-repeat': 'no-repeat',
																		  'background-size': '100% 100%',
															  'background-blend-mode':''
															  }" v-if="item.schemeImgs.length>4">
											<text>共{{item.schemeImgs.length>999?'999+':item.schemeImgs.length || ''}}张</text>
											<uni-icons color="#fff" type="forward" size="13" />
										</view>

										<view class="aaa" v-if="item.schemeImgs.length == 0">
											<text>暂无施工图片...</text>
										</view>
									</view>
									<!-- 确认人员  确认时间-->
									<view class="top_left" v-if="item.finisheBy!=null && item.finisheBy!=''"
										style="color: coral;display:flex;justify-content: space-between;">
										<view>
											<text>确认：</text>
											<text
												v-if="item.finisheBy!=''&&item.finisheBy!=null">{{item.finisheBy}}</text>
										</view>
										<!-- 确认时间 -->
										<view v-if="item.finisheBy!=''&&item.finisheBy!=null">
											<text>
												{{item.updateTime?item.updateTime.slice(0,10):item.updateTime}}
											</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="noneData" v-else>
				<image src="http://106.14.56.171:15016/images/images(4)(1)/images/noMessige.png" mode=""></image>
				<text>暂无记录...</text>
			</view>
	</view>
</template>

<script>
	import echarts from "@/components/echarts/echarts.vue"
	import {
		Desensitized
	} from '../../config/desensitization.js'
	import fileImage from '@/components/fileImage/fileImage.vue'
	export default {
		props: ["prjectId"],
		data() {
			return {
				deviceInfoLeength: '', //设备数量
				deviceName: '',
				rotate: false,
				devData: undefined,
				navIndex: 0, // 切换tabs页
				id: 0,
				prjSchemeList: [],
			}
		},
		computed: {
			option() {
				let legend = ['温度', '湿度']
				let xAxis = []
				let series = []
				let tem = [] // 温度
				let hum = [] // 湿度
				let humMarkPoint = []
				let temMarkPoint = []
				if (this.devData) {
					this.devData.forEach((item, index) => {
						xAxis.push(item.recordtimeDate)
						tem.push(item.temValue)
						hum.push(item.humValue)
						if (item.humValue >= 50) {
							humMarkPoint.push({
								coord: [index, item.humValue],
								value: item.humValue
							})
						}
						if (item.temValue >= 50) {
							temMarkPoint.push({
								coord: [index, item.temValue],
								value: item.temValue
							})
						}
					})
					series.push({
						name: '温度',
						type: 'line',
						data: tem,
						itemStyle: {
							normal: {
								color: '#B5001E', //改变折线点的颜色
								label: {
									show: true,
									color: '#B5001E' //改变折线颜色
								}
							}
						},
						markPoint: {
							data: temMarkPoint
						}
					}, {
						name: '湿度',
						type: 'line',
						data: hum,
						itemStyle: {
							normal: {
								color: '#00CCFF', //改变折线点的颜色
								label: {
									show: true,
									color: '#00CCFF' //改变折线颜色
								}
							}
						},
						markPoint: {
							data: humMarkPoint
						}
					})
				}
				return {
					title: {
						show: true, //false
						subtext: "范围：0~100℃", //副标题文
						left: '5%',
						top: '3.5%',
					},
					dataZoom: [{ // 控制图表左右滑动
						width: '15',
						type: 'slider',
						show: false, //flase直接隐藏图形
						xAxisIndex: [0],
						left: 33, //滚动条靠左侧的百分比
						bottom: 40,
						height: 20, //组件高度  
						start: 0, //滚动条的起始位置
						showDataShadow: false, //是否显示数据阴影
						showDetail: false, //是否显示想洗数值信息
						end: 50 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
					}, {
						type: 'inside',
						show: true,
						xAxisIndex: [0],
						start: 0, //滚动条的起始位置
						end: 0.25 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
					}],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						confine: true
					},
					legend: {
						data: legend,
						top: "6%"
					},
					grid: {
						left: '2%',
						right: '8%',
						bottom: '3%',
						top: '25%',
						containLabel: true
					},
					xAxis: {
						nameLocation: 'center',
						type: 'category',
						data: xAxis,
						axisLabel: {
							interval: 1,
							formatter(value) {
								return value.replace(" ", '\n')
							}
						},
					},
					yAxis: [{
							type: 'value',
							name: '℃',
							max: 125,
							interval: 25,
							axisLabel: {
								color: '#B5001E'
							},
							splitNumber: 6, //设置坐标轴的分割段数
						},
						{
							type: 'value',
							name: '℃',
							min: 0,
							max: 125,
							interval: 25,
							axisLabel: {
								color: '#00CCFF'
							},
							splitNumber: 6, //设置坐标轴的分割段数
						}
					],
					series: series
				}
			}
		},
		created() {
			this.id = this.prjectId;
			console.log(this.id, '项目号');
			this.getRepair();
			this.tempEquipment(); //获取项目温湿度设备
			this.deviceData(); //获取项目温湿度设备数据
			// console.log(this.option);
		},
		components: {
			fileImage,
			echarts
		},
		methods: {
			getRepair() {
				this.$http.get('api/Project/GetPrjSchemeList?PrjInfoId=' + this.id).then(res => {
					if (Array.isArray(res) && res.length > 0) {
						res = res.map(code => {
							return {
								...code,
								finisheBy: code.finisheBy ? Desensitized.desensitizedName(code
									.finisheBy) : code.finisheBy,
							}
						})
					}
					this.prjSchemeList = res
				})
			},
			goToDatail(item, schemeName) {
				let qualifiedItem = JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/project/project_img/qualified_album?arr=' + qualifiedItem + '&types=' +
						schemeName
				});
			},
			/**
			 * 时间：2023/04/04
			 * 功能：获取项目温湿度设备
			 * 接口：api/PrjHumitureDevice/GetPrjHumitureDeviceInfo
			 */
			tempEquipment() {
				this.$http.get(`api/PrjHumitureDevice/GetPrjHumitureDeviceInfo?prjInfoId=${100261}`).then((res => {
					console.log(res, '获取项目温湿度设备');
					this.deviceName = res;
					this.deviceInfoLeength = res.length
					console.log(this.deviceInfoLeength, '获取项目温湿度设备');

				}))
			},
			/**
			 * 时间：2023/04/04
			 * 功能：获取项目温湿度设备数据
			 * 接口：api/PrjHumitureDevice/GetPrjHumitureDeviceData
			 */
			deviceData() {
				this.$http.post('api/PrjHumitureDevice/GetPrjHumitureDeviceData', {
					pageNo: 1,
					pageSize: 10,
					pjHumitureDeviceInfoId: 1
				}).then(res => {
					if (Array.isArray(res.items) && res.items.length > 0) {
						res.items = res.items.map(code => {
							return {
								...code,
								recordtimeDate: code.recordtimeDate.replace('T', ' ').slice(0, 16),
							}
						})

					}
					this.devData = res.items
					console.log(this.devData, '获取项目温湿度设备数据');
				})

			},
			echartsClick() {
				this.rotate = !this.rotate
				console.log(this.rotate, '旋转');
				this.$nextTick(() => {
					console.log(this.$refs.echarts);
					this.$refs.echarts.resize();
				})

			},
			//切换tab页
			checkIndex(value) {
				this.navIndex = value;
			}
		}
	}
</script>

<style lang="less" scoped>
	.detecData {
		margin: auto;
		width: 100%;
	}

	.titlName {
		padding: 24rpx 0 0 0;
		margin-top: 5%;
		background-color: #fff;
		border-radius: 5px;

		>text {
			margin-left: 40rpx;
		}
	}

	.head-nav {
		display: flex;
		justify-content: space-around;
		padding: 6px 0 0 0;

		>view {
			width: 100px;
			border-radius: 50px;
			text-align: center;
			font-size: 22rpx;
		}
	}

	.repairHeader {
		width: 96%;
		margin-bottom: 25rpx;
		background-color: #fff;
		margin: auto;
		margin-top: 20rpx;
		border-radius: 7px;
	}

	.repairHeader-left {
		display: flex;
		justify-content: space-between;
		text-align: center;
		line-height: 60rpx;
		padding: 19rpx 0 0 0;
		padding-bottom: 10px;
		border-radius: 7px;
	}

	.aaa text {
		width: 200rpx;
		height: 140rpx;
		display: inline-block;
		margin-top: 10rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 12px;
		line-height: 140rpx;
		margin-right: 230rpx;
		color: #666;
	}

	.repairHeader .repairHeader-left .repairHeaderOne {
		margin-left: 19rpx;
		display: flex;
		width: 60%;

		.text {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			border: 2px solid #B4001E;
			border-radius: 7rpx;
			line-height: 32rpx;
			text-align: center;
			margin-left: 3px;
			background-color: #fff;
			margin-top: 7rpx;
		}

		.text2 {
			font-size: 18px;
			margin-left: 20rpx;
		}

		.text1 {
			width: 32rpx;
			height: 36rpx;
			border: 2px solid #B4001E;
			border-radius: 7rpx;
			line-height: 40rpx;
			margin-top: 12rpx;

		}
	}

	.filePathImage {
		margin-left: 3%;
		width: 150rpx;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
		border-radius: 20rpx;
		color: #fff;

		text {
			font-size: 28rpx;
		}

	}

	.repairProject .a {
		background-color: #fff;
		width: 96%;
		padding-bottom: 10px;
		margin: auto;
		border-radius: 7px;
		font-weight: 600;

		.fitting {
			display: flex;
			padding-bottom: 20rpx;
		}
	}

	.top_left {
		padding: 19rpx 0 19rpx 10rpx;
	}

	.repairOver {
		margin-right: 20rpx;
	}

	.repairOver text {
		display: inline-block;
		background-color: #ecf4f0;
		height: 40rpx;
		width: 120rpx;
		font-size: 24rpx;
		color: #3E9265;
		border-radius: 20rpx;
		text-align: center;
		line-height: 40rpx;

	}

	.top_right {
		margin-left: 20rpx;
		color: #666;

		>text {
			font-size: 24rpx;
		}
	}

	// 暂无数据
	.noneData {
		margin-top: 200rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;

		>image {
			width: 200rpx;
			height: 200rpx;
		}

		>text {
			margin-top: 20rpx;
			font-size: 26rpx;
		}
	}

	.activite {
		text-align: center;
		width: 99px;
		color: #B4001E;
		border: 1px solid #B4001E;
		border-radius: 16px;
	}
</style>
<style lang="less">
	.cidentChen {
		margin-left: 25rpx;
		width: 150rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}
</style>